<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>CSS的伪元素选择器 ::before 和 ::after</title>
	<style type="text/css">
		.chata{
			width: 200px;
			height: 200px;
			background-color: #62C8A5;
			border-radius: 5px;
			margin: 10px 5px;
			padding: 10px;
			position: relative;
			float: left;
		}
		.chata::before{
			content: "";
			border-bottom: 10px solid #62C8A5;
			border-left: 10px solid transparent;
			border-right:10px solid transparent;
			position:absolute;
			top: -10px;
			left: 45%;
		}
		
		.chatb{
			width:200px;
			height: 200px;
			background-color: #eee;
			border-radius:5px;
			border: 2px solid #62C8A5;
			margin: 10px 5px;
			padding: 10px;
			position: relative;
			float: left;
		}
		.chatb::before{
			content: "";
			position: absolute;
			top:-10px;
			left:50%;
			border-bottom: 10px solid #62C8A5;
			border-left:10px solid transparent;
			border-right: 10px solid transparent;
			margin-left: -10px;
		}
		.chatb::after{
			content:"";
			position: absolute;
			border-bottom:8px solid #eee;
			border-left: 8px solid transparent;
			border-right:8px solid transparent;
			border-bottom: 8px solid #eee;
			margin-left: -8px;
			top: -8px;
			left: 50%;
		}
		.chatc{
			float: left;
			position: relative;
			margin-bottom: 30px;
			width: 200px;
			height: 200px;
			background: #1ABC9C;
			margin: 10px 5px;
			padding: 10px;
			border-radius: 5px;
		}
		.chatc::before{
			content: "";
			left: 20px;
    		transform: skewX(-45deg) rotate(-3deg);
			position: absolute;
			width: 150px;
			height: 10px;
			box-shadow: 0 8px 10px rgba(0,0,0,.5);
			bottom: 10px;
			z-index: -1;
			background: #000;
		}
		.chatc::after{
			content: "";
			position: absolute;
			width: 150px;
			height: 10px;
			box-shadow: 0 8px 10px rgba(0,0,0,.5);
			bottom: 10px;
			z-index: -1;
			background: #000;
			right: 20px;
    		transform: skewX(45deg) rotate(3deg);
		}
	</style>
</head>
<body>
	<div class="cotainer">
		<div class="chata">
			只要一个三角形实现上边三角图标
		</div>
		
		<div class="chatb">
			第二个三角形叠在第一个三角形上面
		</div>
		
		<div class="chatc">
			底部不规则阴影
		</div>
	</div>
</body>
</html>